<template>
	<yb-list
	custom-class="yb-flex-1"
	ref="list"
	type="page"
	:bounce="bounce"
	:empty="emptySync"
	:loading="loadingSync"
	:pulldown="pulldownSync"
	:loadmore="loadmoreSync"
	@pulldown="onPulldown"
	@loadmore="onLoadmore">
		<slot></slot>
		<yb-list-item v-for="(grid, i) in Math.ceil(listSync.length / column)" :key="i">
			<yb-grid
			custom-class="padding-gap"
			custom-style="margin-top: 20rpx"
			:data="listSync.slice(i * column, (i + 1) * column)"
			:column="column"
			:count="column">
				<template v-for="(item, index) in listSync.slice(i * column, (i + 1) * column)" :slot="index">
					<yb-tap custom-class="grid_item_1 yb-flex yb-flex-1"
					@longpress="onShowItemMore(item)"
					@click="onItemClick(item)"
					:custom-style="{
						height: getHeight(item) + 'rpx'
					}">
						<template v-if="item.type == 'character'">
							<view class="grid-item-2 yb-flex yb-align-center">
								<rd-image class="cover" :style="{
									'border-color': skinColor.color_yellow
								}" lazyLoad :border-radius="200" :src="item.avatar || this.app.$business.getDefaultAvatar(item.source)" mode="aspectFill"></rd-image>
								<text class="type" :style="{
									color: skinColor.color_white,
									'background-color': skinColor.color_orange
								}">{{app.$business.getType(item.type)}}</text>
								<text class="name" :style="{color: skinColor.color_1}">{{item.name || '佚名'}}</text>
							</view>
						</template>
						<template v-else>
							<view class="cover-box yb-flex yb-flex-1">
								<rd-image
								lazyLoad
								class="yb-flex-1"
								:border-radius="12"
								:src="item.cover" mode="aspectFill"></rd-image>
								<text class="badge" :style="{
									'border-top-right-radius': '10rpx',
									'background-color': skinColor.color_orange,
									color: skinColor.color_white
								}">{{app.$business.getType(item.type)}}</text>
								<text elevation="3" v-if="item.type == 'novel' || item.type == 'comic' || item.type == 'audible'" class="badeg" :style="{
									top: rank > 0 ? '40rpx' : '15rpx',
									'background-color': item.isEnd ? skinColor.color_blue : skinColor.color_green,
									color: skinColor.color_white
								}">{{item.isEnd ? '已完结' : '连载中'}}</text>
								<text class="tip" v-if="getTip(item)">{{getTip(item)}}</text>
								<template v-else>
									<view class="creator yb-flex yb-row yb-align-center" v-if="item.creator">
										<view class="yb-flex yb-row yb-align-center yb-flex-1">
											<rd-icon :size="24" name="person" :color="skinColor.color_white"></rd-icon>
											<yb-text custom-class="creator-text" :size="20" :color="skinColor.color_white" :value="item.creator"></yb-text>
										</view>
									</view>
								</template>
							</view>
							<yb-text custom-class="title" :lines="1" :size="28" :color="skinColor.color_1" :value="item.title || '未知标题'"></yb-text>
							<yb-text :lines="1" :size="22" :lineHeight="40" :color="skinColor.color_3" :value="item.desc || '这是来自' + app.$business.filterSource(item.source).title + '的' + app.$business.getType(item.type)"></yb-text>
						</template>
					</yb-tap>
				</template>
			</yb-grid>
			<slot name="bottom"></slot>
		</yb-list-item>
	</yb-list>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			list: {
				type: Array,
				default () {
					return new Array
				}
			},
			index: {
				type: [Number,String],
				default: -1
			},
			bounce: {
				type: Boolean,
				default: true
			},
			loading: {
				type: [Boolean,Object,String],
				default: false
			},
			empty: {
				type: [Boolean,Object,String],
				default: false
			},
			pulldown: {
				type: [Boolean,Object],
				default: false
			},
			loadmore: {
				type: [Boolean,Object],
				default: false
			},
			column: {
				type: Number,
				default: 3
			},
			//开启自定义点击事件
			customclickenable: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			emptySync () {
				return Object.assign({}, {
					show: false,
					text: '暂无数据',
					color: this.skinColor.color_gap_1,
					bgColor: this.skinColor.color_bg_1
				}, this.app.$utils.typeof(this.empty) == 'String' ? {text: this.empty} : this.app.$utils.typeof(this.empty) == 'Boolean' ? {show: this.empty} : this.empty)
			},
			loadingSync () {
				return Object.assign({}, {
					show: false,
					text: '加载中',
					color: this.skinColor.color_1,
					bgColor: this.skinColor.color_bg_1
				}, this.app.$utils.typeof(this.loading) == 'String' ? {text: this.loading} : this.app.$utils.typeof(this.loading) == 'Boolean' ? {show: this.loading} : this.loading)
			},
			pulldownSync () {
				return Object.assign({}, {
					show: false,
					color: this.skinColor.color_1
				}, this.app.$utils.typeof(this.pulldown) == 'Boolean' ? {show: this.pulldown} : this.pulldown)
			},
			loadmoreSync () {
				return Object.assign({}, {
					show: !this.isLastPage,
					color: this.skinColor.color_1
				}, this.app.$utils.typeof(this.loadmore) == 'Boolean' ? {show: this.loadmore} : this.loadmore)
			},
			listSync () {
				return this.list.slice(0, Math.min(this.page * this.size, this.list.length))
			},
			isLastPage () {
				return this.page * this.size >= this.list.length
			}
		},
		data () {
			return {
				page: 1,
				size: 21,
				isLoadmoreEnd: false
			}
		},
		methods: {
			onPulldown (callback) {
				this.page = 1
				this.isLoadmoreEnd = false
				if ( this.index > -1 ) {
					this.$emit('pulldown', this.index, callback)
				} else {
					this.$emit('pulldown', callback)
				}
			},
			onLoadmore (callback) {
				if ( this.isLastPage ) {
					if ( this.page * this.size == this.listSync.length ) {
						this.page++
					} 
					if ( this.index > -1 ) {
						this.$emit('loadmore', this.index, callback)
					} else {
						this.$emit('loadmore', callback)
					}
				} else {
					this.page++
					callback('success')
				}
			},
			onItemClick (params) {
				if ( this.customclickenable ) {
					//自定义点击事件
					this.$emit('itemClick', params)
				} else {
					this.app.$business.openDetail(params)
				}
			},
			resetLoadmore () {
				this.isLoadmoreEnd = false
				this.$refs.list.resetLoadmore()
			},
			backTop () {
				this.$refs.list.backTop()
			},
			setLoadmoreEnd () {
				this.isLoadmoreEnd = true
				if ( this.isLastPage ) this.$refs.list.setLoadmoreEnd()
			},
			setLoadmoreSuccess() {
				this.isLoadmoreEnd = false
				if ( this.isLastPage ) this.$refs.list.setLoadmoreSuccess()
			},
			setLoadmoreFail() {
				this.isLoadmoreEnd = false
				if ( this.isLastPage ) this.$refs.list.setLoadmoreFail()
			},
			onShowItemMore (params) {
				this.$emit('itemLongpress', params)
			},
			getHeight (params) {
				let columns = this.column
				if ( params.type == 'novel' || params.type == 'comic' || params.type == 'audible' ) {
					return columns == 3 ? '340' : columns == 2 ? '550' : '740'
				} else if ( params.type == 'picture' ) {
					return columns == 3 ? '380' : columns == 2 ? '590' : '780'
				} else if ( params.type == 'character' ) {
					return columns == 3 ? '245' : columns == 2 ? '360' : '510'
				} else {
					return columns == 3 ? '275' : columns == 2 ? '390' : '540'
				}
			},
			getTip (params) {
				if ( params.type == 'video' ) {
					if ( params.duration ) {
						return this.app.$utils.timeFormat(params?.duration)
					} else if ( params.latest ) {
						return '更新至：' + params.latest
					} else if ( params.style ) {
						return params.style
					} else {
						return params.isEnd ? '已完结' : '连载中'
					}
				} else {
					return params.latest ? '更新至：' + params.latest : (params.style || params.size || '')
				}
			}
		},
		watch: {
			isLastPage (newVal) {
				if ( !newVal ) {
					this.$refs.list && this.$refs.list.setLoadmoreSuccess()
				} else {
					if ( this.isLoadmoreEnd ) {
						this.$refs.list && this.$refs.list.setLoadmoreEnd()
					}
				}
			},
			list (newVal) {
				if ( newVal.length < this.page * this.size ) {
					this.page = Math.ceil(newVal.length / 20) > 0 ? Math.ceil(newVal.length / 20) : 1
				}
			}
		}
	}
</script>

<style>
.grid_item_1 .cover-box {
	position: relative;
}
.grid_item_1 .cover-box .tip {
	font-size: 20rpx;
	position: absolute;
	right: 10rpx;
	bottom: 10rpx;
	background-color: rgba(0,0,0,.5);
	color: #fff;
	padding: 5rpx 10rpx;
	border-radius: 5rpx;
	text-overflow: ellipsis;
	lines: 1;
}
.grid_item_1 .cover-box .badeg {
	font-size: 18rpx;
	position: absolute;
	left: 0;
	padding: 5rpx 15rpx 5rpx 10rpx;
	border-top-right-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}
.grid_item_1 .cover-box .badge {
	font-size: 18rpx;
	position: absolute;
	right: 0;
	top: 0;
	padding: 5rpx 15rpx 5rpx 10rpx;
	border-bottom-left-radius: 10rpx;
	border-top-right-radius: 10rpx;
}
.grid_item_1 .cover-box .cover-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 10rpx;
}
.grid_item_1 .cover-box .cover-bottom .cover-item {
	flex-direction: row;
	align-items: center;
}
.grid_item_1 .cover-box .cover-bottom .cover-text {
	font-size: 18rpx;
	margin-left: 10rpx;
}
.grid_item_1 .title {
	margin-top: 10rpx;
}
.grid_item_1 .creator {
	position: absolute;
	bottom: 20rpx;
	left: 10rpx;
	right: 10rpx;
}
.grid_item_1 .creator-text {
	margin-left: 10rpx;
}
.grid-item-2 {
	position: relative;
}
.grid-item-2 .cover {
	width: 200rpx;
	height: 200rpx;
	border-radius: 200rpx;
	border-width: 10rpx;
	border-style: solid;
}
.grid-item-2 .type {
	font-size: 20rpx;
	padding: 5rpx 15rpx;
	text-align: center;
	width: 80rpx;
	border-radius: 5rpx;
	margin-top: -30rpx;
}
.grid-item-2 .character-rank {
	width: 80rpx;
	border-top-right-radius: 100rpx;
	border-top-left-radius: 100rpx;
}
.grid-item-2 .character-rank .text {
	font-size: 26rpx;
	text-align: center;
}
.grid-item-2 .name {
	font-size: 28rpx;
	margin-top: 10rpx;
	lines: 1;
	text-overflow: ellipsis;
}
.rank {
	position: absolute;
	top: 0;
	left: 0;
	width: 60rpx;
	height: 30rpx;
	align-items: center;
	justify-content: center;
	border-bottom-right-radius: 20rpx;
}
.rank .text {
	font-size: 24rpx;
	font-weight: bold;
}
</style>
